// 该文件用于创建Vuex中最核心的store

// 引入Vue
import Vue from "vue";

// 引入Vuex
import Vuex from "vuex";
/**
 * (1) 在使用Vuex.store实例必须要先Vue.use(Vuex)，否则会报错
       就一句话：只有在Vue上面装了Vuex，vuex上的store才能用
                Vuex只有找到买主，才能出售store
   (2) 不能在main.js中去Vue.use(Vuex)，因为 Vue默认会 把导入的 import store from '...' 放最前面
       这样就先 new Vuex.Store 再 Vue.use(Vuex)了，就反了
   * */
Vue.use(Vuex);

// actions----用于响应组件中的动作
const actions = {
  /**
   * (3) context上下文，里面包含了commit以及其他可能会用到的数据
   *     有dispatch、commit、state等，是简易版的store
   *     有dispatch是因为可能需要调用actions里面的其他函数
   *     有state是为了处理业务逻辑
   * */

  //   add(context, value) {
  //     // console.log('actions里面的add被调用了',context,value);
  //     context.commit("Add", value);
  //   },

  //   sub(context, value) {
  //     context.commit("Sub", value);
  //   },

  // (5) 将业务逻辑都写在actions里面，没有业务逻辑的就直接在组件里commit
  addOdd(context, value) {
    if (context.state.sum % 2) {
      context.commit("AddOdd", value);
    }
  },

  addWait(context, value) {
    setTimeout(() => {
      context.commit("AddWait", value);
    }, 500);
  },
};

// mutations----用于操作数据
const mutations = {
  // (4) state 用来获取并操作里面的数据
  Add(state, value) {
    //  console.log('mutations里面的Add被调用了',state,value);
    state.sum += value;
  },

  Sub(state, value) {
    state.sum -= value;
  },

  AddOdd(state, value) {
    state.sum += value;
  },

  AddWait(state, value) {
    state.sum += value;
  },
};

// states----用于存储数据
const state = {
  sum: 0,
  school:'尚硅谷',
  subject:'前端'
};

// getters----可以将state中的数据进行计算并返回，相当于vue中的computed
const getters = {
  bigSum(state) {
    return state.sum * 10;
  }
};

// 默认暴露，适合只暴露一个数据
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters,
});
